<template>
	<xn-form-container
		title="质检详情"
		width="90%"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
	>
		<a-row :gutter="[0, 0]" class="call-audio">
			<a-col :span="20">
				<WaveSurferAudio
					v-if="currentRecord.fileUrl"
					:audio-url="currentRecord.fileUrl"
				></WaveSurferAudio>
				<div v-else class="empty-audio">
					<i class="iconfont icon-queshengye_zanwushuju"></i>
					<span>音频出逃了~</span>
				</div>
			</a-col>
			<a-col :span="3" class="ml-10" v-if="currentRecord.aiReviewStatus>0">
				<div class="opration-btn">
					<a-button type="primary"
							  v-if="showBranchBtn"
							  @click="handleReview('BRANCH')">分公司质检审核
					</a-button>
					<a-button
						v-if="showHqBtn"
						type="primary"
						@click="handleReview('HQ')">总部质检审核
					</a-button>
					<a-button
						v-if="showFinalBtn"
						type="primary"
						@click="handleReview('FINAL')">终审
					</a-button>
				</div>
			</a-col>
		</a-row>
		<a-row :gutter="[10, 0]" class="call-info">
			<a-col :span="17">
				<a-card title="通话详情">
					<a-descriptions size="small" layout="horizontal" bordered class="des-details">
						<a-descriptions-item label="通话序列号">{{ currentRecord.callId }}</a-descriptions-item>
						<a-descriptions-item label="被叫号码">{{ currentRecord.callee }}</a-descriptions-item>
						<a-descriptions-item label="通话类型">{{ currentRecord.callTypeName }}</a-descriptions-item>
						<a-descriptions-item label="所属公司">{{ currentRecord.deptName }}</a-descriptions-item>
						<a-descriptions-item label="坐席账号">{{ currentRecord.agentNum }}</a-descriptions-item>
						<a-descriptions-item label="坐席姓名">{{ currentRecord.userName }}</a-descriptions-item>
					</a-descriptions>
				</a-card>
			</a-col>
			<a-col :span="7">
				<a-card title="命中关键字">
					<CiYun :keywords="currentRecord.keyword"/>
				</a-card>
			</a-col>
		</a-row>
		<a-row :gutter="[10, 0]" class="call-chat">
			<a-col :span="17">
				<a-spin :spinning="chatLoading">
					<ChatWindow :message-list="chatMessages"/>
				</a-spin>
			</a-col>
			<a-col :span="7">
				<a-card title="AI 推理过程">
					<span v-if="currentRecord.aiReviewResult"
						  style="white-space: pre-line">{{ currentRecord.aiReviewResult }}</span>
					<p v-else class="empty-remark">
						<i class="iconfont icon-queshengye_zanwushuju"></i>
						<span>爱莫能助啦~</span>
					</p>
				</a-card>
			</a-col>
		</a-row>
		<a-modal v-model:open="visibleReviewModal" :title="modalTitle">
			<a-form ref="formRef" :model="formData" class="mt-6">
				<a-form-item label="审核状态" name="status">
					<a-select
						v-model:value="formData.status"
						style="width: 40%"
						placeholder="请选择问题方"
						:options="voiceCheckStatus"
						:disabled="checkDisabled"
					/>
				</a-form-item>
				<a-form-item label="审核备注" name="result">
					<a-textarea
						v-model:value="formData.result"
						placeholder="请输入审核备注"
						:auto-size="{ minRows: 4, maxRows: 8 }"
						:disabled="checkDisabled"
					/>
				</a-form-item>
			</a-form>
			<template #footer>
				<a-button @click="modalCancel">取消</a-button>
				<a-button v-if="!checkDisabled" type="primary" @click="saveApproveStatus"
						  :loading="reviewLoading">确定
				</a-button>
			</template>
		</a-modal>
	</xn-form-container>
</template>
<script setup>

import WaveSurferAudio from "@/components/AudioView/waveSurferAudio.vue";
import ChatWindow from "@/components/ChatWindow/index.vue";
import CiYun from "@/components/CIYun/index.vue";
import asrApi from "@/api/qc/asr/asrApi";
import tool from "@/utils/tool";
import checkApi from "@/api/qc/check/checkApi";

const emit = defineEmits({successful: null})
const visible = ref(false);
const currentRecord = ref({})
const formData = ref({
	id: currentRecord.value.id,
	node: null,
	status: null,
	result: null
})
const modalTitle = ref('质检审核')
const voiceCheckStatus = tool.dictList('voiceCheckStatus')
const checkDisabled = ref(false)
const reviewLoading = ref(false)
const formRef = ref()
const visibleReviewModal = ref(false)
const chatLoading = ref(false)
const chatMessages = ref([])

const isHqAdmin = computed(() =>
	tool.data.get('USER_INFO').orgId === '1863060384407973889'
)

const showBranchBtn = computed(() => {
	return currentRecord.value.branchReviewStatus === '0' && currentRecord.value.hqReviewStatus === '0' && currentRecord.value.finalReviewStatus === '0'
})

const showHqBtn = computed(() => {
	return isHqAdmin.value && currentRecord.value.branchReviewStatus > 0 && currentRecord.value.hqReviewStatus === '0' && currentRecord.value.finalReviewStatus === '0'
})

const showFinalBtn = computed(() => {
	return isHqAdmin.value && currentRecord.value.branchReviewStatus > 0 && currentRecord.value.hqReviewStatus > 0 && currentRecord.value.finalReviewStatus === '0'
})

// 打开抽屉
const onOpen = (record) => {
	visible.value = true;
	currentRecord.value = record
	asrApi.getAstText(record.callId).then(res => {
		chatMessages.value = res
	})
};

// 关闭抽屉
const onClose = () => {
	visible.value = false;
};

const handleReview = (type) => {
	formData.value = {
		...formData.value,
		id: currentRecord.value.id,
		node: type,
		status: currentRecord.value[`${type.toLowerCase()}ReviewStatus`],
		result: currentRecord.value[`${type.toLowerCase()}ReviewResult`]
	}
	modalTitle.value = `${type === 'BRANCH' ? '分公司' : type === 'HQ' ? '总部' : '终审'}质检审核`
	visibleReviewModal.value = true
}

const modalCancel = () => {
	formRef.value.resetFields()
	visibleReviewModal.value = false
}

const saveApproveStatus = () => {
	if (formData.value.status > 0) {
		reviewLoading.value = true
		checkApi.review(formData.value).then(res => {
			onClose()
			emit('successful')
		}).finally(() => {
			modalCancel()
			reviewLoading.value = false
		})
	}
}

// 暴露方法供父组件调用
defineExpose({
	onOpen
});
</script>
<style scoped>
.call-audio {
	height: 110px;
	border-bottom: 1px solid #e6e6e6;

	.opration-btn {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: start;

		> button {
			width: 100%;
		}
	}

	.empty-audio {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;

		.icon-queshengye_zanwushuju {
			font-size: 60px;
		}

		span {
			font-size: 14px;
			color: #999;
		}
	}
}

.call-info {
	height: 140px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 10px 0;

	> div:nth-child(2) {
		flex: 1;
	}

	:deep(.ant-card) {
		display: flex;
		flex-direction: column;
		height: 100%;

		.ant-card-head {
			padding: 0px 10px;
			border-bottom: 1px solid #f0f0f0 !important;
			min-height: 40px !important;

			.ant-card-head-title {
				padding: 0 !important;
			}
		}

		.ant-card-body {
			padding: 8px 10px;
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	:deep(.des-details) {
		width: 100%;

		.ant-descriptions-view {
			.ant-descriptions-item-content {
				span {
					display: inline-block;
					width: 100%;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
	}
}
</style>
